<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span>编辑</span>公司基本信息
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="submitForm('objForm')"
          >提交保存</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-form-item label="公司介绍" prop="store_desc">
          <el-input
            v-model="objForm.store_desc"
            type="textarea"
            placeholder="请输入公司介绍"
            maxlength="300"
            rows="9"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公司联系电话" prop="phone">
          <el-input v-model="objForm.phone" placeholder="请输入公司联系电话" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="公司联系微信" prop="we_chat">
          <el-input
            v-model="objForm.we_chat"
            placeholder="请输入公司联系电话"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公司座机号码" prop="cell_phone">
          <el-input
            v-model="objForm.cell_phone"
            placeholder="请输入公司座机号码"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公司邮箱" prop="email">
          <el-input v-model="objForm.email" placeholder="请输入公司邮箱" maxlength="36" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="公司地址" prop="address">
          <el-input v-model="objForm.address" placeholder="请输入公司地址" maxlength="100" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="公司地址经度" prop="longitude">
          <el-input
            v-model="objForm.longitude"
            placeholder="请输入公司地址经度"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公司地址纬度" prop="latitude">
          <el-input
            v-model="objForm.latitude"
            placeholder="请输入公司地址纬度"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="选择位置坐标">
          <el-button type="text" @click="is_addr_show = true">选取坐标</el-button>
        </el-form-item>
        <el-form-item label="微信公众二维码" prop="qr_code_1">
          <upload
            file-folder="company"
            :file-arr="fileList"
            list-type="picture-card"
            :limit="1"
            accept="image/jpeg, image/png"
            tips="只能上传jpg/png文件，且不超过4MB"
            @getUploadFiles="getUploadFiles"
          ></upload>
        </el-form-item>
        <el-form-item label="淘宝店铺二维码" prop="qr_code_2">
          <upload
            file-folder="company"
            :file-arr="fileList2"
            list-type="picture-card"
            :limit="1"
            accept="image/jpeg, image/png"
            tips="只能上传jpg/png文件，且不超过4MB"
            @getUploadFiles="getUploadFiles2"
          ></upload>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog title="选择地址" :visible.sync="is_addr_show" width="60%">
      <MapSelect :keyword="objForm.address" @setLocation="setLocation"></MapSelect>
      <span slot="footer" class="dialog-footer">
        <el-button @click="is_addr_show = false">取 消</el-button>
        <el-button type="primary" @click="is_addr_show = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import Upload from "@/components/upload/upload";
import MapSelect from "@/components/mapselect/map";
export default {
  components: {
    Upload,
    MapSelect,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "companyBasic",
      backRoute: "companyBasic",
      fileList: [], //微信公众号
      fileList2: [], //淘宝店铺
      is_addr_show: false,
      objForm: {
        id: "1",
        store_desc: "",
        address: "",
        longitude: "",
        latitude: "",
        phone: "",
        we_chat: "",
        cell_phone: "",
        email: "",
        qr_code_1: "",
        qr_code_2: "",
      },
    };
  },
  methods: {
    setLocation(data) {
      this.objForm.longitude = data.lng;
      this.objForm.latitude = data.lat;
    },
    afterGetInfo() {
      if (this.objForm.qr_code_1) {
        this.fileList = [
          {
            name: "qr_code_1",
            url: this.objForm.qr_code_1,
          },
        ];
      }
      if (this.objForm.qr_code_2) {
        this.fileList2 = [
          {
            name: "qr_code_2",
            url: this.objForm.qr_code_2,
          },
        ];
      }
    },
    getUploadFiles(files) {
      this.fileList = files;
      this.objForm.qr_code_1 = files[0]["url"];
    },
    getUploadFiles2(files) {
      this.fileList2 = files;
      this.objForm.qr_code_2 = files[0]["url"];
    },
  },
  created() {
    this.beforeCreated();
    this.getInfo();
  },
};
</script>
